<!doctype html>
<html lang="en">
  <head>
    <script src="index.js" type="module"></script>
    <script src="../../helpers/header.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container text-center">
      <section class="size">
        <label for="rows">Rows</label>
        <input type="range" name="rows" id="rows" min="2" max="8" value="2" list="markers" />

        <label for="columns">Columns</label>
        <input type="range" name="columns" id="columns" min="2" max="8" value="2" list="markers" />

        <datalist id="markers">
          <option value="2"></option>
          <option value="3"></option>
          <option value="4"></option>
          <option value="5"></option>
          <option value="6"></option>
          <option value="7"></option>
          <option value="8"></option>
        </datalist>
      </section>

      <table class="table">
        <tbody class="table-body"></tbody>
      </table>
    </div>
  </body>
</html>
